<template>
  <div class="page-header">
    <div class="title">
      <a href="javascript:void(0)" @click.stop="$router.go(-1)" v-if="goback" title="返回"><i class="el-icon-arrow-left"></i> &nbsp;&nbsp;</a>
      {{ pageTitle }}
    </div>
    <div class="page-nav">
      <ul class="menu">
        <li class="menu_item"
            v-for="(item,index) in menus"
            :class="{'menu_item_active':activeMenu == index}"
            :key="index"
            @click.navtive="chooseMenu(index,item)">
            
            <span>{{item.value}} 
              <el-badge v-if="item.count > 0" :value="item.count"></el-badge>
           </span>
        </li>
      </ul>
    </div>
    <div class="page-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>
<script>
export default{
  name:'globalHeader',
  props: ['goback', 'menus', 'title'],
  data () {
    return{
      pageTitle: '',
      activeMenu: 0,

    }
  },
  methods:{
    chooseMenu (index, item) {
      this.activeMenu=index
      this.$emit("selected", item)
    }
  },
  mounted () {
    this.pageTitle = this.title || this.$route.meta.label
  }
}
</script>
<style scoped lang="scss">
  .page-header {height: 50px; line-height: 50px; padding: 0 20px;background-color:#fff;}
  .page-header .title {font-size: 18px; color: #1a2736; height: 50px;line-height: 50px; margin-right: 83px;float: left;}
  .page-header .page-nav {height: 50px;line-height: 50px; width:70%;}
  .page-header .page-right {float:right;} 
  
  .page-header .menu{
    height: 50px;
    line-height: 50px;
    float: left;
  }
 .page-header .menu_item {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    cursor: pointer;
    color: #5e6978;
    margin-right: 50px;
    padding: 0 5px;
    text-align: center;
    float: left;
  }
  .page-header .menu_item_active{
    border-bottom: 2px solid #007fdf;
    box-sizing: content-box;
    height: 50px;
  }
</style>
